<template>
    <div class="blog-list-container">
      <div class="search-filter">
        <input
          type="text"
          v-model="searchQuery"
          placeholder="搜索文章标题、内容或标签..."
        />
        <select v-model="sortOption">
          <option value="latest">按时间排序</option>
          <option value="likes">按点赞数排序</option>
        </select>
      </div>
      <div v-for="blog in blogs" :key="blog.id" class="blog-item">
        <!-- <h3>{{ blog.title }}</h3> -->
        <img :src="blog.image" alt="Blog Image" v-if="blog.image" style="width: 100px; margin: 30px 20px;"/>
        <p>{{ blog.content }}</p>
        <p>{{ blog.pic }}</p>
        <router-link :to="`/blog/${blog.id}`">查看详情</router-link>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import m1 from "../images/M-1.png"
import m2 from "../images/M-2.png"
import m3 from "../images/M-3.png"

  
  const blogs = ref([
    { id: 1,  content: 'Top Anime Faces 评选 2024 年【百位最帅面孔动漫角色排行 】TOP20🏆1 位：宇智波佐助《火影忍者》2 位：夏油杰《咒术回战》3 位：五条悟《咒术回战》4 位：七海建人《咒术回战》...',image:m1 },
    { id: 2, content: '那些优秀的国漫电影近些年好看的国产动漫也是越来越多，比如说《哪吒之魔童降世》、《长安三万里》、《大鱼海棠》、《落凡尘》等等，接下来为大家盘点好看的国漫电影。 ​',image:m2 },
    { id: 3, content: ' 《死亡笔记》全员帅的很安心！(绘师:sso_s__) #最让你心动的二次元角色# ​​​' ,image:m3},

    
])
  </script>
  
  <style scoped>
  .search-filter {
    margin-bottom: 20px;
  }
  
  .search-filter input {
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .search-filter select {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  .blog-list-container {
    padding: 20px;
  }
  
  .blog-item {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style> 